<template>
  <div class="limitdiv">
    <el-form
      :model="project"
      :rules="rules"
      ref="project"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="报修项目号" prop="projectId">
              <el-input v-model="project.projectId" readonly disabled></el-input>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="报修项目名" prop="projectName">
              <el-select v-model="project.projectName" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-form-item label="项目种类" prop="projectMajor">
        <el-radio-group v-model="project.projectMajor">
          <el-radio label="水">水</el-radio>
          <el-radio label="电">电</el-radio>
          <el-radio label="燃气">燃气</el-radio>
          <el-radio label="其他">其他</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上报时间" required>
        <el-col :span="11">
          <el-form-item prop>
            <el-date-picker v-model="project.projectDate" align="right" type="datetime" readonly></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="报修描述" prop="projectNote">
        <el-input type="textarea" v-model="project.projectNote"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('project')">立即创建</el-button>
        <el-button @click="resetForm('project')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options:[
        {value:"管道维修",label:"管道维修"},
        {value:"用户表维修",label:"用户表维修"},
        {value:"其他",label:"其他"}
        
        ],
      ownerId: "",
      project: {
        projectId: "", //项目号
        projectName: "", //项目名
        projectPlace: "", //地点
        projectDate: "2020/4/21", //项目时间
        projectType: "维修", //项目类型
        projectMajor: "", //项目种类(水，电...)
        projectCost: "", //项目花费
        projectNote: "" //项目备注
      },
      rules: {
        projectMajor: [
          { required: true, message: "请选者维修种类！", trigger: "change" }
        ],
        projectName: [
          { required: true, message: "请输入项目名", trigger: "blur" }
        ],
        projectNote: [
          { required: true, message: "请输入项目描述", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.axios
            .post(
              "project/setrepairpoject?ownerId=" + this.ownerId,
              this.project
            )
            .then(res => {
              if (res.data == "success")
                this.$router.push("/index_owner/showfix");
              console.log(res);
            })
            .catch(err => {
              console.error(err);
            });
          console.log(this.project);
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      window.location.reload();
    }
  },
  created() {
    this.ownerId = sessionStorage.getItem("userId");
    //传时间，项目号
    this.axios
      .post("project/getrepairproject?ownerId=" + this.ownerId)
      .then(res => {
        this.project = res.data;
        console.log(res);
      })
      .catch(err => {
        console.error(err);
      });
  },
  components: {}
};
</script>

<style scope>
.limitdiv {
  width: 500;
  margin: 0 auto;
  width: 50%;
}
</style>
